<!--官网社区-->
<template>
    <div id="app">
        <page-header-white :pageIndex="1"/>
        <nav-list @selectIndex="selectIndex"/>
        <div class="container">
            <CommunityItem :classifieId="classifieId" :articleList="articleList"
                           v-if="articleList.length"></CommunityItem>
            <div v-else class="error">
                {{errText}}
            </div>
            <Loading v-if="isLoading"></Loading>
        </div>
        <page-bottom class="bottom" v-if="initOk"/>
        
        <div class="login-shadow" v-if="showLogin" @click="closeModal">
            <Login class="login-main"></Login>
        </div>
    
        <DownloadModal :visibleModal="visibleModal"></DownloadModal>
    </div>
</template>

<script>
    import PageHeaderWhite from '@views/PageHeaderWhite'
    import PageBottom from '@views/PageBottom'
    import NavList from '@views/NavList'
    import Loading from '@views/Loading'
    import Login from '@views/Login'
    import DownloadModal from '@views/DownloadModal'

    import CommunityItem from '@views/communityList/CommunityItem'
    
    import {formatSeconds} from "../../utils/utils"
    
    export default {
        name: 'app',
        data() {
            return {
                classifieId: '',
                index: 0,
                articleList: [],
                initOk: false,
                isLoading: true,
                showLogin: false,
                errText: '',
                visibleModal: false
            }
        },
        created() {
            this.initData()
        },
        components: {
            PageHeaderWhite, PageBottom, NavList, CommunityItem, Loading, Login, DownloadModal
        },
        methods: {
            initData() {
                this.articleList = []
                this.isLoading = true
                this.initOk = false
                this.$axios({actionName: 'bbs.article.recom', classifieId: this.classifieId}).then(res => {
                    res.data.article.map(item => {
                        item.time = formatSeconds(item.videoTime)
                    })
                    this.articleList = res.data.article
                    this.articleList.forEach((item, index) => {
                        item.src = item.articleCover
                    })
                    this.initOk = true
                    this.isLoading = false
                }).catch(err => {
                    this.initOk = true
                    this.isLoading = false
                    this.errText = err.msg
                })
            },
            selectIndex(index, id) {
                this.index = index
                this.classifieId = id
                this.initData()
            },
            handleClick() {
                this.showLogin = true
                // document.body.style.overflow = 'hidden'
            },
            closeModal(event) {
                let login = document.querySelector(".login-main")
                if (login) {
                    if (!login.contains(event.target)) {
                        this.showLogin = false
                        // document.body.style.overflow = 'auto'
                    }
                }
            },
            toggleDownload() {
                this.visibleModal = !this.visibleModal
            }
        }
    }
</script>

<style lang="less" scoped>
    #app {
        position: relative;
        width: 100%;
        
        .container {
            min-height: 600px;
    
            .error{
                text-align: center;
                line-height: 500px;
                font-size: 20px;
            }
        }
        
        .login-shadow {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, .4);
            z-index: 9999;
        }
    }
</style>
